<template>
  <!-- 一级标题 -->
  <main class="bg-[#E8DCCA] font-song relative overflow-x-hidden">
    <!-- <div class="font-bold text-4xl text-[#00ffff] text-center">
            <i class="fa fa-home"></i>
            首页
        </div> -->

    <!-- 顶部标题区域 -->
    <!-- <div class="fixed top-20 left-10 w-32 h-32 opacity-10 pointer-events-none">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30,5 Q50,0 70,15 Q85,30 75,50 Q65,70 45,75 Q25,80 10,65 Q-5,50 15,30 Q30,10 30,5 Z"
          fill="#3A2E2F"
        />
      </svg>
    </div>
    <div class="fixed bottom-20 right-10 w-40 h-40 opacity-10 pointer-events-none">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M70,50 Q90,30 75,10 Q60,-10 40,15 Q20,40 35,60 Q50,80 70,70 Q90,60 70,50 Z"
          fill="#3A2E2F"
        />
      </svg>
    </div> -->
    <!-- 右上角状态标签 -->
    <div
      class="absolute top-4 right-4 bg-amber-800 text-white px-4 py-1 rounded-sm text-sm font-kai"
    >
      本场比赛已结束
    </div>
    <header class="pt-12 pb-8 px-4 text-center relative">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-kai font-bold mr-4 mb-0 tracking-wider">
        2025韶华墨韵书画艺术大赛
      </h1>
      <div
        class="flex flex-col md:flex-row justify-center items-center gap-2 md:gap-6 mt-4 mr-4 mb-0 text-gray"
      >
        <p class="text-[clamp(0.9rem,2vw,1.1rem)] font-kai">免费报名·名家评审·奖品丰厚·弘扬文化</p>
        <div class="hidden md:block w-16 h-px bg-gray/30"></div>
        <p class="text-[clamp(0.8rem,1.5vw,1rem)] tracking-widest uppercase">
          REGISTRATION EVALUATION PRIZES CULTURE
        </p>
      </div>
      <div class="w-32 h-px bg-[#D4AF37] mx-auto mt-6"></div>
    </header>

    <!-- 说明文字区域 -->
    <div class="max-w-3xl mx-auto px-4 my-8">
      <div class="border-2 border-gray-300 bg-white/50 p-6 relative">
        <div
          class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-paper px-4 text-sm text-gray"
        >
          大赛公告
        </div>
        <p class="text-gray-600 text-center leading-relaxed">
          本榜作品因表现优异，经大赛评审委员会严格评选脱颖而出。作品排名不分先后，旨在展示当代书画艺术的多元风貌。所有获奖作品将在翰墨轩艺术馆进行为期一个月的展出，欢迎各界人士莅临参观。榜单实时更新
        </p>
      </div>
    </div>
    <!-- 获奖作品展示区域 -->
    <div class="max-w-5xl mx-auto px-4 pb-20">
      <section class="mb-16">
        <div class="flex items-center justify-center mb-8">
          <div class="w-16 h-px bg-ink/20"></div>
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-kai mx-4 text-ink">获奖作品</h2>
          <div class="w-16 h-px bg-ink/20"></div>
        </div>
        <!-- 作品卡片1 -->
        <div
          class="bg-white/70 rounded-sm shadow-md overflow-hidden mb-6  transform transition-all duration-300 hover:shadow-lg"
          @click="navTo('/workDetail')"
          >
          <div class="flex flex-row items-center h-[100px]">
            <div
              class="w-[100px] bg-paper flex items-center justify-center p-2  h-full"
            >
              <div class="w-full h-full bg-paper relative overflow-hidden">
                <img src="@/assets/images/shufa_01.jpg" class="w-full max-h-full object-contain" />
              </div>
            </div>
            <div
              class="w-[calc(100%-100px)] p-2 pb-1 flex items-center relative"
            >
              <div class="flex flex-col gap-1 w-full">
                <div class="font-kai text-[clamp(0.8rem,2vw,1.2rem)] font-bold">沁园春雪选段</div>
                <div class="flex flex-col items-start gap-1">
                  <p class="font-kai text-[clamp(0.8rem,2vw,1.2rem)]">胡浩</p>
                  <div class="inline-block bg-lightgold mt-2 text-[#9E2A2B] px-3 py-1 rounded-sm text-sm">
                    书法作品
                  </div>
                  <div
                    class="absolute right-2 top-1/2 transform -translate-y-1/2 font-kai text-lg bg-red-600 text-white px-3 py-1 rounded-full shadow-md -rotate-6"
                  >
                    特等奖
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 作品卡片2 -->
        <div
          class="bg-white/70 rounded-sm shadow-md overflow-hidden mb-6 transform transition-all duration-300 hover:shadow-lg"
        >
          <div class="flex flex-row items-center h-[100px]">
            <div
              class="w-[100px] bg-paper flex items-center justify-center p-2 h-full"
            >
              <div class="w-full h-full bg-paper relative overflow-hidden">
                <img src="@/assets/images/shufa_02.jpg" class="w-full max-h-full object-contain" /> 
              </div>
            </div>
            <div class="w-[calc(100%-100px)] p-2 pb-1 flex items-center relative">
              <div class="flex flex-col gap-1 w-full">
                <div class="font-kai text-[clamp(0.8rem,2vw,1.2rem)] font-bold">兰亭集序</div>
                <div class="flex flex-col items-start gap-1">
                  <p class="font-kai text-[clamp(0.8rem,2vw,1.2rem)]">陈明远</p>
                  <div class="inline-block bg-lightgold mt-2 text-[#9E2A2B] px-3 py-1 rounded-sm text-sm">
                    书法作品
                  </div>
                  <div
                    class="absolute right-2 top-1/2 transform -translate-y-1/2 font-kai text-lg bg-red-600 text-white px-3 py-1 rounded-full shadow-md -rotate-6"
                  >
                    一等奖
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 作品卡片3 -->
        <div
          class="bg-white/70 rounded-sm shadow-md overflow-hidden mb-6 transform transition-all duration-300 hover:shadow-lg"
        >
          <div class="flex flex-row items-center h-[100px]">
            <div
              class="w-[100px] bg-paper flex items-center justify-center p-2 h-full"
            >
              <div class="w-full h-full bg-paper relative overflow-hidden">
                <img src="@/assets/images/shufa_03.jpg" class="w-full max-h-full object-contain" /> 

              </div>
            </div>
            <div class="w-[calc(100%-100px)] p-2 pb-1 flex items-center relative">
              <div class="flex flex-col gap-1 w-full">
                <div class="font-kai text-[clamp(0.8rem,2vw,1.2rem)] font-bold">山水清音图</div>
                <div class="flex flex-col items-start gap-1">
                  <p class="font-kai text-[clamp(0.8rem,2vw,1.2rem)]">林秀雅</p>
                  <div class="inline-block bg-lightgold mt-2 text-[#9E2A2B] px-3 py-1 rounded-sm text-sm">
                    国画作品
                  </div>
                  <div
                    class="absolute right-2 top-1/2 transform -translate-y-1/2 font-kai text-lg bg-red-600 text-white px-3 py-1 rounded-full shadow-md -rotate-6"
                  >
                    特等奖
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 作品卡片4 -->
        <div
          class="bg-white/70 rounded-sm shadow-md overflow-hidden mb-6 transform transition-all duration-300 hover:shadow-lg"
        >
          <div class="flex flex-row items-center h-[100px]">
            <div
              class="w-[100px] bg-paper flex items-center justify-center p-2 h-full"
            >
              <div class="w-full h-full bg-paper relative overflow-hidden">
                <img src="@/assets/images/shufa_04.jpg" class="w-full max-h-full object-contain" /> 
              </div>
            </div>
            <div class="w-[calc(100%-100px)] p-2 pb-1 flex items-center relative">
              <div class="flex flex-col gap-1 w-full">
                <div class="font-kai text-[clamp(0.8rem,2vw,1.2rem)] font-bold">梅兰竹菊四条屏</div>
                <div class="flex flex-col items-start gap-1">
                  <p class="font-kai text-[clamp(0.8rem,2vw,1.2rem)]">王梦琪</p>
                  <div class="inline-block bg-lightgold mt-2 text-[#9E2A2B] px-3 py-1 rounded-sm text-sm">
                    国画作品
                  </div>
                  <div
                    class="absolute right-2 top-1/2 transform -translate-y-1/2 font-kai text-lg bg-red-600 text-white px-3 py-1 rounded-full shadow-md -rotate-6"
                  >
                    一等奖
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
</template>

<script setup>
// 路由跳转
import { useRouter } from 'vue-router';
// 引入路由
const router = useRouter();
// 跳转函数
const navTo = (path) => {
  router.push({
    path: path
  });
}

</script>